<script>
import {deleteBatch, getPictureList} from "@/api/aihuman/mySources/picture";
import EditPicDialog from "@/views/aihuman/MyResources/EditPicDialog.vue";
import PreviewDialog from "@/views/aihuman/MyResources/PreviewDialog.vue";
import {mapGetters} from "vuex";
import EmptyData from "@/components/aihuman/EmptyData/index.vue";
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "Picture",
  components: {EmptyData, PreviewDialog, EditPicDialog},
  data() {
    return {
      list: [],
      isShowCheckbox: false,
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      searchForm: {},
      loading: false
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission[`resources-add`], false),
        deleteBtn: this.vaildData(this.permission[`resources-delete`], false),
        editBtn: this.vaildData(this.permission[`resources-edit`], false),
      }
    }
  },
  methods: {
    getUrl,
    selectAll(val) {
      this.list.forEach(item => {
        item.checked = val
      })
    },
    removeBatch() {
      let selectList = this.list.filter(item => item.checked)
      this.removeRow(selectList)
    },
    preview(o) {
      this.$refs.previewDialog.openDialog(o.url)
    },
    removeRow(data) {
      if (data.length === 0) {
        this.$message.error('请选择数据')
        return false
      }

      this.$confirm('确定要删除选中数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = data.map(item => item.id).join(',')
        deleteBatch({ids: ids}).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList()
        })
      }).catch(() => {

      });
    },
    changeCheckBox(val) {
      console.log(val);
    },
    editRow(item) {
      this.$refs.picDialog.openDialog(item)
    },
    getList() {
      this.$nextTick(async () => {
        try {
          this.loading = true
          const params = {
            pageNo: this.page.pageNo,
            pageSize: this.page.pageSize,
            ...this.searchForm
          }

          const {data} = await getPictureList(params)
          this.list = data.data.records.map(item => {
            return {
              ...item,
              checked: false
            }
          })
          this.page.total = data.data.total

        } catch (e) {
          console.log(e);
        } finally {
          this.loading = false
        }

      })
    }
  }
}
</script>

<template>
  <div v-loading="loading">
    <template v-if="page.total > 0">
      <div class="picture-container">
        <div class="picture-box" v-for="(item, index) in list" :key="index">
          <div class="picture-box-img">
            <el-checkbox
              v-if="isShowCheckbox"
              v-model="item.checked"
              class="picture-box-checkbox" @change="changeCheckBox"/>
            <div class="picture-box-model">
              <el-button type="primary" size="small" @click="preview(item)">预览</el-button>
            </div>
            <img :src="getUrl() + item.url" alt="">
          </div>
          <div class="picture-box-text">
            <div class="picture-box-name">{{ item.name }}</div>
            <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="permissionList.editBtn" @click.native="editRow(item)">编辑</el-dropdown-item>
                <el-dropdown-item v-if="permissionList.deleteBtn" @click.native="removeRow([item])">删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>


      </div>
      <div class="pagination-box">
        <el-pagination
          background
          @size-change="getList"
          @current-change="getList"
          :current-page.sync="page.pageNo"
          :page-sizes="[9, 18, 36, 72]"
          :page-size.sync="page.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </template>
    <empty-data v-else/>

    <edit-pic-dialog
      ref="picDialog"
      @save-ok="getList"
    />

    <preview-dialog
      ref="previewDialog"
      type="image"
    />
  </div>

</template>

<style scoped lang="scss">
.pagination-box {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  box-sizing: border-box;
}

.picture-box-model {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  bottom: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 100;
}

.picture-box-name {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picture-box-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 15%;
  font-size: 14px;
}

.picture-box-img {
  width: 100%;
  height: 85%;
  padding: 10px 10px 0;
  box-sizing: border-box;
  position: relative;

  &:hover {
    .picture-box-model {
      display: flex;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
  }
}

.picture-box-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 200;
}

.picture-container {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 350px);
  overflow-y: auto;
}

.picture-box {
  width: 24%;
  height: 35vh;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;

  &:hover {
    box-shadow: 0 0 12px rgba(16, 29, 43, 0.2);
  }

  &:nth-child(4n) {
    margin-right: 0;
  }
}

// 小于1920px
//@media screen and (max-width: 1920px) {
//  .picture-box {
//    width: 32%;
//    margin-right: 23px;
//    height: 300px;
//    margin-bottom: 23px;
//    position: relative;
//
//    &:nth-child(5n) {
//      margin-right: 23px;
//    }
//
//    &:nth-child(3n) {
//      margin-right: 0;
//    }
//  }
//}
</style>
